<template>
    <div style="overflow: hidden;height: 1600px">
        <el-card class="card">
            <p class="title" style="font-size: 40px" >DATABASE</p>
            <div class="smalldiv">
                <el-image :src="url1"></el-image>
                <el-image :src="url2"></el-image>
                <el-image :src="url3"></el-image>
                <p class="smallp" >TRAIN</p>
            </div>
            <div class="smalldiv">
                <el-image :src="url4"></el-image>
                <el-image :src="url5"></el-image>
                <el-image :src="url6"></el-image>
                <p class="smallp">FOREIGN</p>
                <el-button style="float: right;padding-bottom: 5px" @click="drawer=true">MORE DETAIL</el-button>
            </div>
            <div class="smalldiv">
                <el-image :src="url7"></el-image>
                <el-image :src="url8"></el-image>
                <el-image :src="url9"></el-image>
                <p class="smallp">INFRASTRUCTURE</p>

            </div>
<!--        </el-card>-->
<!--        <el-card class="card">-->

        </el-card>
        <el-card class="card">
            <p class="title">ABOUT</p>
            Made by a team from BJTU
        </el-card>
        <el-card class="card">
            <p class="title">DOWNLOAD</p>
            In coming...
        </el-card>
        <el-drawer
                title="MORE FOREIGN"
                :visible.sync="drawer"
                :direction="direction"
                >
            <p>HUMAN</p>
            <el-carousel :interval="4000" type="card" height="200px">
                <el-carousel-item v-for="item in humanUrls" :key="item">
                    <el-image :src="baseURL+item"></el-image>
                </el-carousel-item>
            </el-carousel>
            <p>ANIMAL</p>
            <el-carousel :interval="4000" type="card" height="200px">
                <el-carousel-item v-for="item in animalUrls" :key="item">
                    <el-image :src="baseURL+item"></el-image>
                </el-carousel-item>
            </el-carousel>
            <button @click="drawer2=true">
                <p  >STATIC</p>
            </button>

        </el-drawer>


        <el-drawer
                title=">>TEXTRUE"
                :visible.sync="drawer2"
                :direction="direction"
                style="left: 30%;top:5%;width: 1600px;"
        >
            <div class="drawDiv">
                <p>STONE</p>
                <el-carousel :interval="4000" type="card" height="200px">
                    <el-carousel-item v-for="item in stoneUrls" :key="item">
                        <el-image :src="baseURL+item"></el-image>
                    </el-carousel-item>
                </el-carousel>
                <p>WOODEN</p>
                <el-carousel :interval="4000" type="card" height="200px">
                    <el-carousel-item v-for="item in woodUrls" :key="item">
                        <el-image :src="baseURL+item"></el-image>
                    </el-carousel-item>
                </el-carousel>
                <p>IRON</p>
                <el-carousel :interval="4000" type="card" height="200px">
                    <el-carousel-item v-for="item in ironUrls" :key="item">
                        <el-image :src="baseURL+item"></el-image>
                    </el-carousel-item>
                </el-carousel>
            </div>

        </el-drawer>
    </div>
</template>

<script>
    import POST from '../../api/POST'
    export default {
        name: "index",
        data(){
            return{
                baseURL:'http://127.0.0.1:8000/api/url/get/',
                url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                url1:'http://127.0.0.1:8000/api/url/get/7/',
                url2:'http://127.0.0.1:8000/api/url/get/8/',
                url3:'http://127.0.0.1:8000/api/url/get/9/',
                url4:'http://127.0.0.1:8000/api/url/get/4/',
                url5:'http://127.0.0.1:8000/api/url/get/5/',
                url6:'http://127.0.0.1:8000/api/url/get/6/',
                url7:'http://127.0.0.1:8000/api/url/get/10/',
                url8:'http://127.0.0.1:8000/api/url/get/11/',
                url9:'http://127.0.0.1:8000/api/url/get/12/',
                drawer: false,
                drawer2:false,
                direction: 'ltr',
                urls:[
                    {
                        url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
                    },
                    {
                        url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
                    },
                    {
                        url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
                    },
                    {
                        url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
                    },
                ],
                humanUrls:[],
                animalUrls:[],
                stoneUrls:[],
                woodUrls:[],
                ironUrls:[],
            }
        },
        created() {
            this.getUrls('human',this.humanUrls);
            this.getUrls('animal',this.animalUrls);
            this.getStoneUrls('stone',this.stoneUrls);
            this.getStoneUrls('wood',this.woodUrls);
            this.getStoneUrls('iron',this.ironUrls);



        },
        methods:{
            getUrls(type,list){
                let data = {
                    type:type
                };
                POST.databaseShow(data).then(res=>{
                    res.forEach(item=>{
                        list.push(item.imgid)
                    })
                })
            },
            getStoneUrls(texture,list){
                let data = {
                    type: 'stone',
                    texture:texture
                };
                POST.databaseShow(data).then(res=>{
                    res.forEach(item=>{
                        list.push(item.imgid)
                    })
                })
            }
        }
    }
</script>

<style scoped>
    .title{
        text-align: center;
        font-weight: bold;
        font-size: 30px;
    }
    .card{
        width: 80%;
        margin: 0 auto;
        margin-top: 50px;
        border: 5px;

    }
    .smalldiv{
        display: inline-block   ;
        width: 30%;
        margin: 1%;
        background-color: #1965d9;
        height: 50px;
    }
    .smallp{
        display: inline;
        font-weight: bold;
    }
    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 200px;
        margin: 0;
    }
    .drawDiv{
        width: 95%;
        margin: 0 auto;
        overflow-y: visible;

    }
</style>
